<template>
    <div>
        <cell></cell>
        <!--<div>
            <x-button type="primary" plain style="border-radius:99px;width: 45%">存酒</x-button>
            <x-button type="primary" plain style="border-radius:99px;width: 45%">取酒</x-button>
        </div>-->
        <button-tab v-model="demo01">
            <button-tab-item @on-item-click="push()">存酒</button-tab-item>
            <button-tab-item @on-item-click="pull()">取酒</button-tab-item>
        </button-tab>
        <divider>————————————————————————————</divider>
        <group v-if="status == 1">
            <x-button type="primary" @click.native="scan">扫码</x-button>
        </group>
        <!--<scroller v-if="status == 2" lock-x height="500px" ref="scroller">-->
            <div v-if="status == 2" class="box2" style="position:absolute; width:100%;height:65%;overflow:scroll">
                <div v-for="ticket in ticketArr">
                    <form-preview :header-label="ticket.mch_name" :header-value="'截止日期'+ticket.end_time" :body-items="ticket.wineList" :footer-buttons="buttons" :name="ticket.wine_id"></form-preview>
                    </br>
                </div>
                
                <!--<form-preview header-label="单子" header-value="已过期" :body-items="list1" :footer-buttons="buttons" name="demo"></form-preview>
                </br>
                <form-preview header-label="单子" header-value="已过期" :body-items="list1" :footer-buttons="buttons" name="demo"></form-preview>
                </br>-->
            </div>
        <!--<scroller v-if="status == 2" lock-x scrollbar-y height="2000px" ref="scroller">-->
        <!--<group >-->
            <!--<button-tab v-model="demo02">
                <button-tab-item @on-item-click="save()">保存</button-tab-item>
                <button-tab-item @on-item-click="reset()">重置</button-tab-item>
            </button-tab>-->
            
            
        <!--</group>-->
        <!--</scroller>-->
        <!--<divider></divider>-->
        <!--<group v-if="status == 3">
            请用户扫码确认
            请等待管理员确认，取酒进行中........
            <qrcode :value="url" type="img"></qrcode>
        </group>-->
        
        <div v-transfer-dom >
            <x-dialog style="position:relative;top:-100px;" v-model="show" hide-on-blur :dialog-style="{'max-width': '100%', width: '100%', height: '50%', 'background-color': 'transparent'}">
                <p style="color:#fff;text-align:center;" @click="show = false">
                
                <qrcode :value="qrcode" type="img" style="max-width:100%"></qrcode>
                <br>
                <br>
                <x-icon type="ios-close-outline" style="fill:#fff;"></x-icon>
                </p>
            </x-dialog>
        </div>
    </div>
</template>

<script>
    import {TransferDomDirective as TransferDom,XDialog,XButton,Cell,ButtonTab, ButtonTabItem,Divider,XInput,XNumber,Group,Qrcode,Scroller} from 'vux'
    // import actor from '../../api/actor.js'
    // import axios from 'axios'
    import FormPreview from '../../common/com/form-preview'
    import user from '../../api/user.js'
    import util from '../../api/util.js'
    import dateformat from 'dateformat'
    // import ip from '../../api/ip.js'

    // var url = "http://" + ip
    // axios.defaults.baseURL = url

    export default {
        directives: {
            TransferDom
        },
        components:{
            XDialog,
            Cell,
            XButton,
            ButtonTab,
            ButtonTabItem,
            Divider,
            XInput,
            XNumber,
            Group,
            Qrcode,
            FormPreview,
            Scroller
        },
        data(){
            return {
                qrcode:"",
                demo01:0,
                demo02:0,
                roundValue:0,
                status:0,
                ticketArr:[],
                buttons: [{
                    style: 'primary',
                    text: '取酒',
                    onButtonClick: (name) => {
                        this.status = 3
                        this.tickid = name
                        this.qrcode = "/wine/getbyid?wine_id=" + name

                        var _ = this
                        _.show = true
                        
                        // // 订阅,事件处理完得到消息
                        user.socket.emit('wine_subscribe',{
                            mch_id:user.userinfo.mch_id,
                            openid:user.userinfo.openid,
                            tag:_.tickid
                        })
                        // 监听通知
                        user.socket.on('wine_notify',function(data){
                            _.$vux.alert.show({
                                title: '提示',
                                content: data
                            })
                            // 收到通知后 取消订阅
                            // user.socket.emit('cancelSubscribe',{tag:_.tickid})
                            _.show = false
                        })

                    }
                }],
                wine_name:'',
                user,
                util,
                tickId:0,
                show:false
            }
        },
        watch:{
            'status':function(val,oldVal){
                switch(val){
                    // 取酒－读取取酒单列表
                    case 2:
                        this.$axios.get('/wine/getArrByUser?openid='+user.userinfo.openid)
                        .then((ret)=>{
                            var _ = this
                            var tmpObj = {}
                            ret.data.forEach((el,index)=>{
                                tmpObj = {}
                                tmpObj.wine_id = el.wine_id
                                tmpObj.mch_id = el.mch_id
                                tmpObj.mch_name = el.mch_name
                                tmpObj.openid = el.openid
                                tmpObj.nick = el.nick
                                tmpObj.end_time = dateformat(el.end_time,"yyyy-mm-dd")
                                tmpObj.wineList = util.strToJsonArr(el.wine_list)
                                _.ticketArr.push(tmpObj)
                            })
                        })
                        break;
                    // 点击取酒－待扫－等待通知
                    case 3:
                        break;
                    default:
                }
            }
        },
        methods:{
            // step 1 初始化
            push(){
                this.status = 1
            },
            // step 2 scan
            scan(){
                var _ = this
                wx.scanQRCode({
                needResult: 1,
                desc: 'scanQRCode desc',
                success: function (res) {
                    // window.alert(res.resultStr+"&openid="+user.userinfo.openid)
                    _.$axios.get(res.resultStr+"&openid="+user.userinfo.openid)
                    .then((ret)=>{
                        window.alert(ret)
                        var tag_id = res.resultStr.split("=")[1]
                        if(ret.data.info == "success"){
                            user.socket.emit('wine_notify',{tag:tag_id},"存酒成功")
                        }
                    })
                }
                });
            },
            // 第一步 初始化
            pull(){
                this.status = 2
            }
        },
        mounted(){
            
        }
    }
</script>